import React from 'react';

class FormComponent extends React.Component{

	constructor(props){
		super(props);
		this.user = {
			"gender":2
		};
		this.submitHandler = this.toSubmit.bind(this);
		this.setValueHander = this.setValue.bind(this);
	}


	toSubmit(event){
		event.preventDefault();
		let userString = JSON.stringify(this.user);
		console.log(userString);
	}
	setValue(event){
		let target  = event.target;
		let value =  target.type === 'checkbox' ? target.checked : target.value;
		let name = target.name;
		this.user[name] = value;
	}
	setFristName(event){

		let firstName = 	event.target.value;
		this.user.fristName =  firstName;
	}
	setRemark(event){
		this.user.remark = event.target.value;
	}
	setGender(event){
		let gender = event.target.value;
		this.user.gender = 	gender;
	}
	render (){

		return (
				<form onSubmit={this.submitHandler}>
					<label>
					Name: <input type = "text" name = "firstName" value={this.user.firstName} onChange={this.setValueHander}/>
					</label><br/>
					<label>
					remark:<textarea  name="remark" value={this.user.remark} onChange={(e)=>{this.setValueHander(e)}}/>
					</label><br/>
					<label>
			          gender:
			          <select name = "gender" value={this.user.gender} onChange={(e)=>{this.setValueHander(e)}}>
			            <option value="1">boy</option>
			            <option value="2">girl</option>
			          </select>
			        </label><br/>

			        <label>
			          Is student ? :
			          <input
			            name="isStudent"
			            type="checkbox"
			            checked={this.user.isStudent}
			            onChange={this.setValueHander} />
			        </label>

					<input type ="submit" value="Submit"/>
				</form>
			);
	}
}
export default FormComponent;